<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>

<div class="row">
    <div class="col-md-12">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">${blog != null ? '编辑博客' : '发布新博客'}</h5>
            </div>
            <div class="card-body">
                <form action="${pageContext.request.contextPath}${blog != null ? '/blog/update' : '/blog/create'}" method="post">
                    <c:if test="${blog != null}">
                        <input type="hidden" name="id" value="${blog.id}">
                    </c:if>
                    
                    <div class="row mb-3">
                        <div class="col-md-9">
                            <label for="title" class="form-label">标题 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" value="${blog != null ? blog.title : ''}" required>
                        </div>
                        <div class="col-md-3">
                            <label for="category" class="form-label">分类 <span class="text-danger">*</span></label>
                            <select class="form-select" id="category" name="category" required>
                                <option value="" disabled ${blog == null ? 'selected' : ''}>选择分类</option>
                                <option value="技术" ${blog != null && blog.category == '技术' ? 'selected' : ''}>技术</option>
                                <option value="生活" ${blog != null && blog.category == '生活' ? 'selected' : ''}>生活</option>
                                <option value="旅游" ${blog != null && blog.category == '旅游' ? 'selected' : ''}>旅游</option>
                                <option value="艺术" ${blog != null && blog.category == '艺术' ? 'selected' : ''}>艺术</option>
                                <option value="其他" ${blog != null && blog.category == '其他' ? 'selected' : ''}>其他</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="content" class="form-label">内容 <span class="text-danger">*</span></label>
                        <div class="alert alert-info mb-2">
                            <i class="fas fa-info-circle me-2"></i>
                            支持Markdown格式
                        </div>
                        <textarea class="form-control" id="content" name="content" rows="16" required>${blog != null ? blog.content : ''}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="previewToggle">
                            <label class="form-check-label" for="previewToggle">预览内容</label>
                        </div>
                    </div>
                    
                    <div id="previewContainer" class="border rounded p-3 mb-3 d-none">
                        <h4 class="border-bottom pb-2 mb-3">预览</h4>
                        <div id="previewContent" class="markdown-content"></div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="${pageContext.request.contextPath}/blog${blog != null ? '/view?id='.concat(blog.id) : '/myblogs'}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                            ${blog != null ? '返回查看' : '返回列表'}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>
                            ${blog != null ? '保存修改' : '发布博客'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义样式和脚本 -->
<style>
#content {
    font-family: monospace;
    font-size: 14px;
}

.preview-content {
    line-height: 1.8;
}

.preview-content img {
    max-width: 100%;
    height: auto;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 切换预览
    const previewToggle = document.getElementById('previewToggle');
    const previewContainer = document.getElementById('previewContainer');
    const previewContent = document.getElementById('previewContent');
    const contentTextarea = document.getElementById('content');
    
    previewToggle.addEventListener('change', function() {
        if (this.checked) {
            const markdown = contentTextarea.value;
            previewContent.innerHTML = marked.parse(markdown);
            previewContainer.classList.remove('d-none');
        } else {
            previewContainer.classList.add('d-none');
        }
    });
    
    // 实时更新预览
    contentTextarea.addEventListener('input', function() {
        if (previewToggle.checked) {
            const markdown = contentTextarea.value;
            previewContent.innerHTML = marked.parse(markdown);
        }
    });
});
</script>

<%@ include file="/WEB-INF/jsp/common/footer.jsp" %> 